SilenYang@前端笔记
0%

在 flutter 中一些属性的使用

发表于 更新于 分类于

在这篇文章中将介绍一些在 flutter 中，布局时使用到的一些属性，方便以后查阅。

在 flutter 中使用 boxShadow

在页面布局时中，难免会用到一些阴影，在 flutter 中，阴影的使用有很大的区别。例如要创建下面的盒子：

需要的代码则为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new Container(
    height: 138.0,
    width: 335.0,
    child: new Text('data'),
    alignment: Alignment.center,
    decoration: new BoxDecoration(
        color: Color(0xffffffff),
        borderRadius: BorderRadius.all(new Radius.circular(10.0)),
        border: new Border.all(
            color: Colors.grey,
            width: 1.0,
        ),
        boxShadow: [
            new BoxShadow(
                color: Colors.grey,
                offset: Offset.zero,
                blurRadius: 20.0,
            ),
        ]
    ),
)),

在 flutter 中，boxShadow 需要定义在 decoration 属性中，并他的类型为 List<BoxShadow>，是一个数组，多个 boxShadow属性会叠加，数组后的阴影会叠加在前面的阴影之上。

在使用阴影的时候，必须要加上背景色，不然会出现镂空的情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
decoration: new BoxDecoration(
    // color: Color(0xffffffff),
    boxShadow: [
        new BoxShadow(
            offset: Offset(0.0, -5.0),
            color: Colors.blue,
            blurRadius: 15.0,
            // spreadRadius: 2.0,
        ),
        new BoxShadow(
            color: Colors.grey,
            offset: Offset.zero,
            blurRadius: 20.0,
            // spreadRadius: 2.0,
        ),
    ]),
)),

使用 Baseline 对文字进行对齐排列

在开发应用的时候难免会遇到将一段文字进行拆分，每一段有不同的样式之类的情况。而不同样式之后的文字对其就会出现问题，例如下面代码所示：

1
2
3
4
5
6
7
8
9
10
11
12
new Row(
    children: <Widget>[
        new Text(
            '$point',
            style: new TextStyle(
                fontSize: 40.0,
                color: new Color.fromRGBO(110, 166, 253, 1.0),
            ),
        ),
        new Text(unit)
    ],
)

所展现的效果为默认居中对齐：

 在 Row 控件中，属性 crossAxisAlignment 中有一个对其效果，配合 textBaseline 属性使用可以实现大致的效果，但实际上不是很精确:

1
2
3
4
5
new Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    ...
)

呈现的效果为

如果对对齐效果要求不是很高，这样就可以了。但如果要达到如下准确的对其效果，则需要用到使用 Baseline 控件来完成。

其代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
child: new Row(
    children: <Widget>[
        new Baseline(
            baseline: 50.0,
            baselineType: TextBaseline.alphabetic,
            child: new Text(
                '$point',
                style: new TextStyle(
                    fontSize: 40.0,
                    color: new Color.fromRGBO(110, 166, 253, 1.0),
                    // textBaseline: TextBaseline.alphabetic,
                ),
            ),
        ),
        new Baseline(
            baseline: 42.0,
            baselineType: TextBaseline.alphabetic,
            child: new Text('$unit'),
        ),
    ],
),

Baseline 控件详解

Baseline 控件布局行为分为两种情况：

  • 如果 child 有 baseline，则根据 child 的 baseline 属性，调整 child 的位置
  • 如果 child 没有 baseline，则根据 child 的 bottom，来调整 child 的位置

Baseline 控件有两个属性：
baseline：baseline 数值，必须要有，从顶部算。
baselineType：baseline 类型，也是必须要有的，目前有两种类型：

  • alphabetic：对齐字符底部的水平线；
  • ideographic：对齐表意字符的水平线。

Row 控件的 textBaseline 属性的值也属于这两种类型

如果在对其过程中需要一些细微的调节，可以修改 baseline 属性的值来达到精确对其效果